<!--
 Copyright 2024 CCC
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 
     https://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->
<template>
  <div
    class="container d-flex justify-content-center align-items-center vh-100"
  >
    <div class="col-11 col-sm-8 col-lg-6 col-xl-4 col-xxl-4">
      <form class="border shadow-sm rounded p-4">
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">用户名：</label>
          <input
            type="email"
            :class="['form-control', { 'is-invalid': loginInfo.usernameMsg }]"
            id="exampleInputEmail1"
            aria-describedby="emailHelp"
            v-model="loginInfo.username"
          />
          <div class="invalid-feedback">
            {{ loginInfo.usernameMsg }}
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">密码：</label>
          <input
            type="password"
            :class="['form-control', { 'is-invalid': loginInfo.passwordMsg }]"
            id="exampleInputPassword1"
            v-model="loginInfo.password"
          />
          <div class="invalid-feedback">
            {{ loginInfo.passwordMsg }}
          </div>
        </div>
        <div class="mb-3 form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1" />
          <label class="form-check-label" for="exampleCheck1">记住我</label>
        </div>
        <div class="d-flex flex-column align-items-center px-1">
          <button
            type="submit"
            class="btn btn-primary w-100 mb-2 text-light"
            @click="submit()"
          >
            登录
          </button>
          <router-link
            to="/reg"
            class="border rounded w-100 text-decoration-none text-center"
          >
            <button type="submit" class="btn">注册</button>
          </router-link>
        </div>
      </form>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { reactive, computed } from "vue";
import { useRouter } from "vue-router";
// import { useUserStore } from "@/store/user";

// 获取路由实例
const router = useRouter();
// const store = useUserStore();

const loginInfo = reactive({
  username: "",
  usernameMsg: computed(() => {
    if (
      loginInfo.username !== "" &&
      !/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/gim.test(loginInfo.username)
    ) {
      return "请输入正确的邮箱地址";
    }
    return "";
  }),
  password: "",
  passwordMsg: computed(() => {
    if (loginInfo.password !== "" && loginInfo.password.length < 6) {
      return "密码的长度不能小于6位";
    }
    return "";
  }),
});
const submit = () => {
  router.push("/home");
  // if (loginInfo.username === "") {
  //   loginInfo.usernameMsg = "用户名不能为空";
  //   return;
  // }
};
</script>
  
  <style scoped>
</style>